<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var url = "ws://localhost:8080/ChatHandler/";
	var ws = null;//websocket对象
	//加入聊天室
	$("#join").click(function() {
		//获取当前加入聊天室人的名字
		var uname = $("#uname").val();
		//url+=uname;
		//创建websocket,连接服务器
		ws = new WebSocket(url+uname);
		//ws对象绑定事件
		//连接服务器
		ws.onopen = function() {
			console.info("连接成功")
		}
		//接收消息
		ws.onmessage = function(result) {
			$("#message").append(result.data+"\n");
			var textarea = document.getElementById('message');
			textarea.scrollTop = textarea.scrollHeight;
		}
		//关闭连接
		ws.onclose = function() {
			$("#message").append(uname+":离开群聊\n");
			console.info("断开连接");
		}
		
		
	});
	//发送消息
	$("#send").click(function() {
			//获取输入框
			var content = $("#content").val();
			//发送
			if(ws!=null){
				ws.send(content);
				$("#content").val();//清除输入框
			}
	});
	//离开聊天室
	$("#leave").click(function() {
		if(ws!=null){
			ws.close();
		}
	});
	
	
});
</script>
</head>
<body>
<div style="text-align: center;">
	<p style="text-align: center;">成功人士聊天室</p>
	<textarea rows="20" cols="50" disabled="disabled" id="message"></textarea>
	<div >
	<input type="text" id="content">
		<button id="send">发送消息</button>
		
	</div>
	<br>
	<div>
		<input type="text" id="uname">
		<button id="join">加入聊天室</button>
		<button id="leave">离开聊天室</button>
	</div>
	
</div>
</body>
</html>